<template>
    <div style="background-color: white; padding: 20px">
        <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" @submit="handleSubmit">
            <a-form-item label="用户名">
                <a-input
                    v-decorator="['username', { rules: [{ required: true, message: '请输入用户名!' }] }]"
                />
            </a-form-item>
            <a-form-item label="账号">
                <a-input
                    v-decorator="['account', { rules: [{ required: true, message: '请输入账号!' }] }]"
                />
            </a-form-item>
            <a-form-item label="密码">
                <a-input-password v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码!' }] },
        ]"/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                <a-button :loading="saveLoading" html-type="submit" type="primary">
                    保存
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>


import {METHOD, request} from "@/utils/request";

export default {
    name: 'Palette',
    data() {
        return {
            saveLoading: false,
            color: 'rgb(245, 34, 45)',
            formLayout: 'horizontal',
            form: this.$form.createForm(this, {name: 'coordinated'}),
        }
    },
    components: {},
    mounted() {
        this.userID = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;

    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.saveLoading = true;
                    console.log('Received values of form: ', values);
                    values.type = 1;
                    values.site_id = this.userID;

                    request("/user/addAdmin", METHOD.POST, values).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success(res.data.data);
                            this.form.resetFields();
                        } else {
                            this.$message.error(res.data.msg);
                        }

                        this.saveLoading = false;
                    });
                }
            });
        },
    }
}
</script>

<style lang="less" scoped>
.view-color {
    margin-top: 48px;
    display: inline-block;
    height: 96px;
    width: 96px;
    border-radius: 48px;
    border: 1px dashed gray;
}
</style>
